<!-- 引入模板文件 -->
<!-- 注意：引用的是绝对路径 -->
<extend name="./Public/templete/base.html"/>    

<!-- 页面标题 -->
<block name="title"><title>Index/login</title></block>

<!-- 添加该页面对应需要的css文件 -->
<block name="link">
  <link rel="shortcut icon" src="./favicon.ico" />
  <link rel="stylesheet" type="text/css" href="../../../Public/source/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="../../../Public/source/css/css2.css">
</block>


<!-- 右下侧的主体内容 主要内容在此处写 -->
<block name="content">
    <div class="layui-body">
        <div style="padding: 15px;">
           <!-- 代码从此次开始写，外层两个div不建议删除 -->
            <blockquote class="layui-elem-quote">任务分配</blockquote>  
            <br>
            <div class="layui-row">
              <div class="layui-col-xs6">
                  <div class="grid-demo grid-demo-bg1">
                    <div id="table1" class="table1"></div>
                  </div>
              </div>
              <div class="layui-col-xs6">
                  <div class="grid-demo">
                      <div class="layui-inline"> 
                        <button id="input"><input type="text" placeholder="输入要查找日期" class="layui-input" id="test1" ></button>
                        <button class="layui-btn layui-btn-radius layui-btn-primary" id="search"><i class="layui-icon">&#xe615;</i></button>
                      </div>
                  </div>  
              </div>
            </div>
            <br>
            <blockquote class="layui-elem-quote">培训时间</blockquote>
            <br>
            <div class="layui-row">
              <div class="layui-col-xs5">
                  <div class="grid-demo grid-demo-bg1">
                    <div id="tag">
                      <ul>
                          <div id='motto'><li><h3><i class="layui-icon">&#xe66e;</i>&nbsp;学而不思则罔，思而不学则殆</h3></li></div>
                          <div id='motto'><li><h3><i class="layui-icon">&#xe66e;</i>&nbsp;冰冻三尺非一日之寒</h3></li></div>
                          <div id='motto'><li><h3><i class="layui-icon">&#xe66e;</i>&nbsp;业精于勤荒于嬉</h3></li></div>
                      </ul> 
                    </div>          
                  </div>
              </div>
              <div class="layui-col-xs7">
                  <div class="grid-demo">
                    <div id="table" class="table"></div>
                  </div>
              </div>
            </div>
            <br>
            <blockquote class="layui-elem-quote">学习进度</blockquote>
            <br>
            <div class="layui-row">
              <div class="layui-col-xs1">
                <div class="grid-demo grid-demo-bg1">
                  <h6>&nbsp;</h6>
                </div>   
              </div>
              <div class="layui-col-xs10">
                <div class="grid-demo">
                  <div id="studyline">
                      <h1 style="text-align: center; color: #00cde1;"><strong>学习情况进度表</strong></h1>
                      <br>
                      <div><h4 style="float:left;">武梦洁</h4></div>
                      <div class="layui-progress layui-progress-big" lay-showPercent="true">
                      <div class="layui-progress-bar" lay-percent="20%"></div>
                      </div>
                       <br>
                       <div><h4 style="float:left;">武梦洁</h4></div>
                      <div class="layui-progress layui-progress-big" lay-showPercent="true">
                      <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
                      </div>
                       <br>
                       <div><h4 style="float:left;">武梦洁</h4></div>
                      <div class="layui-progress layui-progress-big" lay-showPercent="true">
                      <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
                      </div>
                       <br>
                       <div><h4 style="float:left;">武梦洁</h4></div>
                      <div class="layui-progress layui-progress-big" lay-showPercent="true">
                      <div class="layui-progress-bar" lay-percent="20%"></div>
                      </div>
                       <br>
                       <div><h4 style="float:left;">武梦洁</h4></div>
                      <div class="layui-progress layui-progress-big" lay-showPercent="true">
                      <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
                      </div>
                       <br>
                       <div><h4 style="float:left;">武梦洁</h4></div>
                      <div class="layui-progress layui-progress-big" lay-showPercent="true">
                      <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
                      </div>
                       <br>
                       <div><h4 style="float:left;">武梦洁</h4></div>
                      <div class="layui-progress layui-progress-big" lay-showPercent="true">
                      <div class="layui-progress-bar" lay-percent="20%"></div>
                      </div>
                       <br>
                       <div><h4 style="float:left;">武梦洁</h4></div>
                      <div class="layui-progress layui-progress-big" lay-showPercent="true">
                      <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
                      </div>
                       <br>
                       <div><h4 style="float:left;">武梦洁</h4></div>
                      <div class="layui-progress layui-progress-big" lay-showPercent="true">
                      <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
                      </div>
                       <br>
                       <div><h4 style="float:left;">武梦洁</h4></div>
                     <div class="layui-progress layui-progress-big" lay-showPercent="true">
                      <div class="layui-progress-bar" lay-percent="20%"></div>
                      </div>
                       <br>
                       <div><h4 style="float:left;">武梦洁</h4></div>
                      <div class="layui-progress layui-progress-big" lay-showPercent="true">
                      <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
                      </div>
                       <br>
                       <div><h4 style="float:left;">武梦洁</h4></div>
                      <div class="layui-progress layui-progress-big" lay-showPercent="true">
                      <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
                        </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-xs1">
                 <div class="grid-demo grid-demo-bg1">
                 
                 </div>   
              </div>
            </div>
        </div>
    </div>
</block>  





<!-- 引入或写js代码 -->
<block name="js">
  <script src="../../../Public/source/layui/layui.js"></script>
  <!-- <script src="../../../Public/source/Echarts/echarts-gl.js"></script>
  <script src="../../../Public/source/Echarts/echarts.js"></script> -->
  <script src="../../../Public/source/Echarts/echarts.min.js"></script>
  <script type="text/javascript" src="../../../Public/source/jquery-3.2.1.js"></script>
<script type="text/javascript">
    var myChart=echarts.init(document.getElementById('table'));
    var date = [],num1 = [],num2=[];//先定义
    function getNumber()
        {
            $.ajax(
            {
                /*url:"{:U(stat/getmsg)}",*/
                url:"__URL__/getmsg",
                async:false,
                dataType:'json',
                type:'post',
                success:function(sta)
                {
                    for(var i=4;i>=0;i--)
                    {
                        date.push(sta[i].date);
                        num1.push(sta[i].num1);
                        num2.push(sta[i].num2);
                    }
                }
                /*error:function(sta){//报错由于格式不正确，dump导致
                    
                  alert('sfsf')
                }*/
            }
                );
        };
    getNumber();
      option = {
        title: {
            text: '培训次数',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['前端', '后台']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: date
        },
        series: [
            {
                name: '前端',
                type: 'bar',
                data: num1
            },
            {
                name: '后台',
                type: 'bar',
                data: num2
            }
        ]
    };
    myChart.setOption(option);
  </script>
  <script type="text/javascript">
    var myChart=echarts.init(document.getElementById('table1'));
    /*$(function(){
    var h=$("#search").val();//获取输入框的内容


    }};*/
    
    $('#search').click(function(){
      var date1=$('#test1').val();
      $.ajax({
      url:'__URL__/getmsg4'
      ,data:{
        date:date1
      }
      ,success:function(data)
      {
        alert(data)
      }
    });
    })
    
      option = {
          title : {
              text: '2018-07-9',
              subtext: '任务分配',
              x:'center'
              
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              left: 'left',
              data: ['数据统计（武梦洁 游宏）','会议记录（孟泽轩 陶伊）','培训记录','学习记录','任务分配']
          },
          series : [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius : '65%',
                  center: ['50%', '60%'],
                  data:[
                      {value:3, name:'数据统计（武梦洁 游宏）'},
                      {value:3, name:'会议记录（孟泽轩 陶伊）'},
                      {value:3, name:'培训记录'},
                      {value:3, name:'学习记录'},
                      {value:3, name:'任务分配'}
                  ],
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 20,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      };
    myChart.setOption(option);
  </script>
  <script>
  //JavaScript代码区域
  layui.use('element', function(){
    var element = layui.element;
    
  });
  </script>
  <script>
    layui.use('laydate', function(){
      var laydate = layui.laydate;
      
      //执行一个laydate实例
      laydate.render({
        elem: '#test1' //指定元素
      });
    });
  </script>
</block> 